import React,{ Component} from 'react';
import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { Link } from  'react-router-dom';
import { actionCreators }   from './store'
import { actionCreators as  loginActonCreators }   from '../../pages/login/store';

import {
  HeaderWrapper,
  NavLogo,
  Nav,
  NavItim,
  SaarchWrapper,
  NavSearch,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
  SearchInfoList,
  Addition,
  Button
} from './style';

class Header extends Component {

  getListArea(){
    const { focused ,list ,page,totalPage,mouseIn,handleMouseEnter,handleMouseLeave,handleChangePage} =  this.props;
    const newList = list.toJS();
    const pageList = [];

    if (newList.length){

      for (let i = (page - 1) *10 ; i < page * 10 ;i++ ){
        if(i < newList.length){
            pageList.push(
                <SearchInfoItem key = {newList[i]} >{newList[i]}</SearchInfoItem>
            )
          }
      }
    }

    if(focused || mouseIn){
      return (
        <SearchInfo
           onMouseEnter ={handleMouseEnter}
           onMouseLeave ={handleMouseLeave}
           >
          <SearchInfoTitle>
              热门搜索
              <SearchInfoSwitch onClick ={() =>handleChangePage(page,totalPage,this.spinIcon)}>
                <i ref = {(icon) => {this.spinIcon = icon}}className="iconfont spin">&#xe606;</i>
                  换一批
              </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList}
          </SearchInfoList>
        </SearchInfo>

      )

    }else{
      return null;
    }
  }

   render(){
     const { focused,handleInputFocus,handleInputBlur,doLogOut,list,login} = this.props;
     return (
             <HeaderWrapper>
               <Link to='/'>
                  <NavLogo/>
               </Link>

               <Nav>
                 <NavItim className="left active" >简书</NavItim>
                 <NavItim className="left" >App下载</NavItim>
                 <NavItim className="right">
                   <i className="iconfont">&#xe636;</i>
                 </NavItim>
                  {
                     login?
                     <NavItim className="right" onClick = {doLogOut} >退出</NavItim> :
                     <Link to ='/login' >
                      <NavItim className="right ">登录</NavItim>
                     </Link>
                      }
                 <SaarchWrapper>
                   <CSSTransition
                     in = {focused}
                     timeout = {200}
                     classNames = "slide"
                     >
                     <NavSearch
                       className ={focused ? 'focused':''}
                       onFocus ={() =>handleInputFocus(list)}
                       onBlur = {handleInputBlur}
                       ></NavSearch>
                   </CSSTransition>
                   <i className={ focused? 'iconfont focused zoom': 'iconfont zoom' }>&#xe636;</i>
                     {this.getListArea()}
                 </SaarchWrapper>

                 <Addition>
                   <Link to='/write'>
                   <Button className="writting">
                     <i className="iconfont">&#xe61c;</i>
                     写文章
                   </Button>
                   </Link>
                   <Button className="reg">注册</Button>
                 </Addition>
               </Nav>
             </HeaderWrapper>
       )

   };
}

const mapStateToProps = (state) => {

  return {
    focused: state.getIn(['header','focused']),
    page: state.getIn(['header','page']),
    totalPage: state.getIn(['header','totalPage']),
    list: state.getIn(['header','list']),
    mouseIn: state.getIn(['header','mouseIn']),
    login: state.getIn(['login','login']),
    //方法是等价上面的
    // focused: state.get('header').get('focused')
  }

}

const mapDispathToProps = (dispatch) => {
  return {
      handleInputFocus(list){
        if (list.size === 0){
        dispatch(actionCreators.getList());
        }
        dispatch(actionCreators.searchFocus());
      },
      handleInputBlur(){
        dispatch(actionCreators.searchBlur());
      },
      handleMouseEnter(){
        dispatch(actionCreators.mouseEnter());
      },
      handleMouseLeave(){
        dispatch(actionCreators.mouseLeave());
      },
      handleChangePage(page,totalPage,spin){
        let originAngle = spin.style.transform.replace(/[^0-9]/ig,'')
        if (originAngle){
        originAngle = parseInt(originAngle,10);
        }else{
          originAngle = 0;
        }
        spin.style.transform = 'rotate('+ (originAngle + 360) + 'deg)'
        if(page<totalPage){
          dispatch(actionCreators.changePageList(page + 1));
        }else{
          dispatch(actionCreators.changePageList(1));
        }

      },
      doLogOut(){
        dispatch(loginActonCreators.doLogOut(false));
      }


  }
}

export default connect(mapStateToProps,mapDispathToProps)(Header);
